<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>S.Overlay Demo</title>

<script src="../../build/kissy.js"></script>
<script src="../uibase/uibase.js"></script>
<script src="../uibase/uibase-box.js"></script>
<script src="../uibase/uibase-contentbox.js"></script>
<script src="../uibase/uibase-position.js"></script>
<script src="../uibase/uibase-shim.js"></script>
<script src="../uibase/uibase-mask.js"></script>
<script src="../uibase/uibase-align.js"></script>
<script src="../uibase/uibase-loading.js"></script>
<script src="overlay.js"></script>
<script src="../dd/ddm.js"></script>
<script src="../dd/draggable.js"></script>
<script src="../uibase/uibase-stdmod.js"></script>
<script src="../uibase/uibase-close.js"></script>
<script src="../uibase/uibase-drag.js"></script>
<script src="../uibase/uibase-constrain.js"></script>
<script src="dialog.js"></script>

<link rel="stylesheet" href="../../build/cssbase/base-min.css"/>
<link rel="stylesheet" href="assets/cool.css"/>
<style>
    body {
        padding: 20px 50px 50px;
    }

    h2 {
        margin: 10px 0 10px -20px;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: normal;
        background: #F2F2F2;
    }

    p.code-switch {
        color: #09f;
        cursor: pointer;
        margin-top: 10px;
    }

    pre.code {
        color: #444;
        cursor: auto;
        border-left: 2px solid #7F96AA;
        margin-top: 5px;
        padding: 0 10px 20px 10px;
        font-size: 14px;
    }
</style>
</head>

<body>

<h2>overlay - 从 Markup 中构建</h2>

<button id="btn1">Show</button>
<button id="btn2">Hide</button>

<div id="popup1" class="ks-overlay" style="border:1px solid #ccc;background:#F6F9FD">
    <div class="ks-contentbox-content">
        Popup content
    </div>
</div>


<script>
    KISSY.ready(function(S) {

        var popup = new S.Overlay({
            srcNode:S.one("#popup1"),
            width: 300,
            height: 200,
            align: {
                node: '#btn1',
                points: ['tr', 'tl'],
                offset: [50, 0]
            }
        });
        S.one('#btn1').on('click', function() {
            popup.show();
        });
        S.one('#btn2').on('click', function() {
            popup.hide();
        });

    });
</script>
<p class="code-switch">显示源码</p>

<h2>Popup - 从 Markup 中构建</h2>

<a id="link1">hover me</a>
<select>
    <option>aaaa</option>
    <option>bbb</option>
</select>
<div id="popup2" class="ks-overlay" style="border:1px solid #ccc;background:#F6F9FD">
    <div class="ks-contentbox-content">
        Popup content
    </div>
</div>
<script>
    KISSY.ready(function(S) {

        var popup = new S.Overlay({
            srcNode:"#popup2",
            width: 300,
            height: 200,
            align: {
                node: S.one('#link1'),
                points: ['tr', 'tl']
            }
        });

        S.one('#link1').on('mouseenter', function() {

            popup.show();
        });
        S.one('#link1').on('mouseleave', function() {
            popup.hide();
        });
    });
</script>
<p class="code-switch">显示源码</p>


<style>
    .popup2 {
        border: 1px solid green;
        background: none repeat scroll 0 0 rgb(246, 249, 253);
    }
</style>
<h2>Popup - 新建Popup</h2>
<a id="link2">hover me</a>
<script>
    KISSY.ready(function(S) {
        var popup = new S.Overlay({
            width: 300,
            height: 200,
            elCls: 'popup2',
            content: 'test popup',
            align: {
                node: '#link2',
                points: ['tr', 'tl']
            }
        });
        S.one('#link2').on('mouseenter', function() {
            
            popup.show();
        });
        S.one('#link2').on('mouseleave', function() {
            popup.hide();
        });
    });
</script>
<p class="code-switch">显示源码</p>


<h2>多个触发元素公用一个 Popup</h2>
<style>
    #multi {
        width: 60px;
    }

    #multi li {
        background: orange;
        margin: 6px;
        width: 80px;
        text-align: center;
    }

    #popup3 {
        display: none;
        background: white;
        border: 1px solid orange;
        width: 100px;
        height: 100px;
    }
</style>
<ul id="multi">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>

<script>
    KISSY.ready(function(S) {

        var lis = S.query('#multi li'),
                popup = new S.Overlay({
                    elStyle:{
                        border:"1px solid red"
                    }
                });


        // 注意：这里的用法已改变
        S.each(S.query('#multi li'), function(t) {
            t = new S.Node(t);
            t.on("mouseenter", function() {
                popup.set("content", t.html());
                popup.render();
                popup.align(t, ["tr","tl"]);
                popup.show();
            });
            t.on("mouseleave", function() {
                popup.hide();
            });
        });
    });
</script>
<p class="code-switch">显示源码</p>

<style>
    .dialog1 {
        display: none;
        background: #ffffff;
        border: 2px solid green;
        text-align: center;
        padding: 6px;
    }
</style>
<h2>Dialog - auto render</h2>
<button id="btn3">Show</button>
<div id="markupDialog" class="ks-dialog">
    <div class="ks-contentbox">
        <div class="ks-stdmod-header">
            i am header
        </div>
        <div class="ks-stdmod-body">
            <div style="padding:50px;">
                从 markup 生成 dialog
            </div>
        </div>
        <a class="ks-ext-close"><span class="ks-ext-close-x">X</span></a>
    </div>
</div>
<script>
    KISSY.ready(function(S) {
        var d = new S.Dialog({
            srcNode: "#markupDialog",
            width:400
        });

        S.one("#btn3").on("click", function() {
            d.render();
            d.center();
            d.show();
        });
    });
</script>
<p class="code-switch">显示源码</p>


<h2>Dialog - 新建 + Mask</h2>
<button id="btn4">Show</button>
<script>
    KISSY.ready(function(S) {
        var dialog = new S.Dialog({
            width: 400,
            bodyStyle:{
                height: 300
            },
            headerContent: 'this is title',
            footerContent: 'footer',
            bodyContent: 'content',
            mask: true
        });
        S.one("#btn4").on("click", function() {
            dialog.render();
            dialog.center();
            dialog.show();
        });
    });
</script>
<p class="code-switch">显示源码</p>

<style>
    .constrain {
        border: 4px solid gray;
        width: 600px;
        height: 400px;
    }
</style>
<h2>Dialog Constrain</h2>
<div class="constrain" id="c1">
    constrain area
    <select>
        <option> hello world </option>
    </select>
</div>
<button id="btn6">show</button>
<button id="btn7">release</button>
<button id="btn8">constrain</button>
<script>
    KISSY.ready(function(S) {
        var dialog = new S.Dialog({
            width: 400,
            bodyStyle:{
                height: 100
            },
            headerContent: 'this is title',
            footerContent: 'footer',
            bodyContent: 'content',
            mask: false,
            align: {
                node: '#c1',
                points: ['cc', 'cc']
            },
            constrain: '#c1',
            draggable: true
        });

        var stat = ['release', 'constrain'],
                sh = ['show', 'hide'];
        S.Event.on('#btn6', 'click', function() {
            dialog.show();
            dialog.set("align", {
                node: '#c1',
                points: ['cc', 'cc']
            });
        });


        S.Event.on('#btn7', 'click', function() {
            var b = this,
                    s = S.DOM.html(b);
            dialog.set('constrain', false);
        });

        S.Event.on('#btn8', 'click', function() {
            var b = this,
                    s = S.DOM.html(b);
            dialog.set('constrain', "#c1");
            dialog.set("align", {
                node: '#c1',
                points: ['cc', 'cc']
            });
        });

    });
</script>
<p class="code-switch">显示源码</p>



<h2>Dialog fixed 居中</h2>
<button id="btn5">Show</button>
<script>
    KISSY.ready(function(S) {
        var dialog = new S.Dialog({
            width: 400,
            bodyStyle:{
                height: 300
            },
            elStyle:{
              position:S.UA.ie==6?"absolute":"fixed"
            },
            headerContent: 'this is title',
            footerContent: 'footer',
            bodyContent: 'content',
            mask: true,
            draggable:false
        });
        S.one("#btn5").on("click", function() {
            dialog.render();
            dialog.center();
            dialog.show();
        });
        if(S.UA.ie==6){
            S.Event.on(window,"scroll",function(){
                if(dialog.get("visible"))
                dialog.center();
            });
        }
    });
</script>
<p class="code-switch">显示源码</p>

<script>
    (function() {
        var S = KISSY, DOM = S.DOM,
                SHOW_CODE = '显示源码', HIDE_CODE = '隐藏源码';

        S.all('p.code-switch').each(function(p) {
            p.on('click', function() {
                var showing = (p.text() === SHOW_CODE),
                        next = p.next(),
                        pre = next;

                if (next[0].nodeName !== 'PRE') {
                    pre = S.Node('<pre>');

                    pre.attr('class', 'code')
                            .html(p.prev().html());

                    if (S.UA.ie) {
                        pre.html(pre.html() + '<br />// 请用非 ie 内核浏览器查看。');
                    }

                    DOM.insertAfter(pre[0], p[0]);
                }

                pre.css('display', showing ? 'block' : 'none');
                p.html(showing ? HIDE_CODE : SHOW_CODE);
            });
        });
    })();
</script>
</body>
</html>
